import React, {Component} from 'react'

interface DropdownItemProps {
  className?: string
  borderBottom?: boolean
  isActive?: boolean
  disabled?: boolean
  size?: 'sm' | 'xl'
  link?: string
  icon?: React.ReactNode
  text: string
  onClick?: () => void
}

class DropdownItem extends Component<DropdownItemProps> {
  render(): React.ReactNode {
    const {className, borderBottom, disabled, isActive, size, link, icon, text, onClick} =
      this.props
    let resultClassName: string =
      'dropdown-item ' +
      (size ? size + ' ' : 'xl ') +
      (borderBottom ? 'border-bottom ' : '') +
      (isActive ? 'active ' : '') +
      (disabled ? 'disabled ' : '') +
      (className ? className : '')
    let item: React.ReactNode = (
      <>
        {icon && icon}
        {text}
      </>
    )

    if (link) {
      return (
        <a href={link} className={resultClassName} role={'menuitem'} onClick={onClick}>
          {item}
        </a>
      )
    }
    return (
      <button
        className={resultClassName}
        role={'menuitem'}
        type={'button'}
        onClick={(): void => {
          onClick && onClick()
        }}>
        {item}
      </button>
    )
  }
}

export {DropdownItem}
